﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>热销商品推荐区</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link href="../bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <style>
        .custom .active {
            border-radius: 0 !important;
            background: #ff5774 !important;
        }

        .color1 {
            color: #FF4466;
        }

        .color2 {
            color: #ff9797;
        }

        .value {
            font-size: 0.8rem;
        }
    </style>
</head>

<body class="container">
    <h3>热销商品推荐 <small class="ms-2 text-muted">HOT</small></h3>
    <ul class="nav nav-pills nav-fill custom">
        <li class="nav-item border flex-fill text-center">
            <a class="nav-link active" data-bs-toggle="tab" href="#image1">水 果</a>
        </li>
        <li class="nav-item border flex-fill text-center">
            <a class="nav-link" data-bs-toggle="tab" href="#image2">蔬菜</a>
        </li>
        <li class="nav-item border flex-fill text-center">
            <a class="nav-link" data-bs-toggle="tab" href="#image3">海鲜</a>
        </li>
        <li class="nav-item border flex-fill text-center">
            <a class="nav-link" data-bs-toggle="tab" href="#image4">糕点</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="image1">
            <div class="row g-0">
                <div class="col-3 p-3 border">
                    <img src="images/01.png" alt="" class="img-fluid">
                    <p class="my-2 value text-center">精品草莓</p>
                    <div class="row text-center">
                        <div class="col-6 border-end value color1">￥20</div>
                        <div class="col-6 value"><a href="#" class="text-dark"><i
                                    class="fa fa-weixin me-1 color2"></i>200评价</a></div>
                    </div>
                </div>
                <div class="col-3 p-3 border">
                    <img src="images/02.png" alt="" class="img-fluid">
                    <p class="my-2 value text-center">精品石榴</p>
                    <div class="row text-center">
                        <div class="col-6 border-end value color1">￥16</div>
                        <div class="col-6 value"><a href="#" class="text-dark"><i
                                    class="fa fa-weixin me-1 color2"></i>401评价</a></div>
                    </div>
                </div>
                <div class="col-3 p-3 border">
                    <img src="images/03.png" alt="" class="img-fluid">
                    <p class="my-2 value text-center">精品苹果</p>
                    <div class="row text-center">
                        <div class="col-6 border-end value color1">￥18</div>
                        <div class="col-6 value"><a href="#" class="text-dark"><i
                                    class="fa fa-weixin me-1 color2"></i>600评价</a></div>
                    </div>
                </div>
                <div class="col-3 p-3 border">
                    <img src="images/04.png" alt="" class="img-fluid">
                    <p class="my-2 value text-center">精品葡萄</p>
                    <div class="row text-center">
                        <div class="col-6 border-end value color1">￥22</div>
                        <div class="col-6 value"><a href="#" class="text-dark"><i
                                    class="fa fa-weixin me-1 color2"></i>230评价</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="image2">
            <div class="row no-gutters">
                <div class="col-3 p-3 border">
                    <img src="images/11.png" alt="" class="img-fluid">
                    <p class="my-2 value text-center">精品辣椒</p>
                    <div class="row text-center">
                        <div class="col-6 border-end value color1">￥28</div>
                        <div class="col-6 value"><a href="#" class="text-dark"><i
                                    class="fa fa-weixin me-1 color2"></i>401评价</a></div>
                    </div>
                </div>
                <div class="col-3 p-3 border">
                    <img src="images/12.png" alt="" class="img-fluid">
                    <p class="my-2 value text-center">精品萝卜</p>
                    <div class="row text-center">
                        <div class="col-6 border-end value color1">￥9</div>
                        <div class="col-6 value"><a href="#" class="text-dark"><i
                                    class="fa fa-weixin me-1 color2"></i>160评价</a></div>
                    </div>
                </div>
                <div class="col-3 p-3 border">
                    <img src="images/13.png" alt="" class="img-fluid">
                    <p class="my-2 value text-center">精品菠菜</p>
                    <div class="row text-center">
                        <div class="col-6 border-end value color1">￥6</div>
                        <div class="col-6 value"><a href="#" class="text-dark"><i
                                    class="fa fa-weixin me-1 color2"></i>200评价</a></div>
                    </div>
                </div>
                <div class="col-3 p-3 border">
                    <img src="images/14.png" alt="" class="img-fluid">
                    <p class="my-2 value text-center">精品黄瓜</p>
                    <div class="row text-center">
                        <div class="col-6 border-end value color1">￥199</div>
                        <div class="col-6 value"><a href="#" class="text-dark"><i
                                    class="fa fa-weixin me-1 color2"></i>1100评价</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="image3">
        </div>
        <div class="tab-pane fade" id="image4">
        </div>
    </div>
</body>

</html>